<template>
  <div class="index">
    <Header></Header>
    <div class="main">
      <p class='current-nav'>当前位置 : <router-link to='index'>首页</router-link> <i> > </i><a>企业管理员</a><i> > </i>个人设置</p>

      <div class="infor personset personset1" style="margin-bottom:0;">
        <p class="title">个人信息</p>

        <div class="form-container">
          <div class="uploadPic"
               @click='uploadFlag=true'>
            <img :src='imgUrL'
                 alt="" />
            <a>上传头像</a>
          </div>
          <el-form :model="ruleForm"
                   ref="ruleForm"
                   label-width="184px"
                   class="demo-ruleForm">
            <el-form-item label="企业账号 :">
              <el-input v-model="ruleForm.userAccount"
                        disabled></el-input>
            </el-form-item>
            <el-form-item label="公司 :">
              <el-input v-model="ruleForm.companyName"
                        disabled></el-input>
            </el-form-item>
            <el-form-item label="姓名 :"
                          prop="userName">
              <el-input v-model="ruleForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="部门 :"
                          prop="departmentName">
              <el-input v-model="ruleForm.departmentName"></el-input>
            </el-form-item>
            <el-form-item label="备注 :"
                          prop="mark">
              <el-input type="textarea"
                        v-model="ruleForm.mark"></el-input>
            </el-form-item>
          </el-form>
          <div class="bts">
            <el-button type="primary"
                       @click="submitForm('ruleForm')"
                       class='sure'>保存</el-button>
            <el-button @click="resetForm('ruleForm')"
                       class='cancel'>取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="上传头像"
               :visible.sync="uploadFlag">
      <copper v-on:success="success(res)"></copper>
    </el-dialog>
    <Footer />
  </div>
</template>

<script>
import copper from './copper'
import Header from '../common/header'
import Footer from '../common/footer'
import config from "../../config.js"
import { mapState } from 'vuex'
export default {
  components: {
    Header,
    Footer,
    copper
  },
  data () {
    return {
      uploadFlag: false,
      ruleForm: {
        userName: '',
        departmentName: '',
        mark: ''
      }
    };
  },
  mounted () {
    this.getInfo()
  },
  computed: {
        ...mapState([
            'imgUrL'
        ])
    },
  methods: {
    success (res) {
      this.uploadFlag = false
      this.getInfo()
    },
    submitForm (formName) {
      let params = Object.assign(this.ruleForm,{ userId: localStorage.userid })
      this.$axios.post(config.baseUrl + 'emergency/v1.0/perfect/infomation', params)
        .then((res) => {
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message)
            this.$router.push('index')
          } else {
            this.$message.w(res.data.meta.message)
          }

        }).catch((response) => {
          console.log(response);
        })

    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    getInfo () {
      this.$axios.post(config.baseUrl + 'emergency/v1.0/personal/info', { userId: localStorage.userid })
        .then((res) => {
          if (res.data.meta.success) {
            this.ruleForm = res.data.data
            if (res.data.data.photo) {
                this.$store.commit('setImgUrl',res.data.data.photo)
            }
          } else {
            console.log(res.data.meta.message)
          }

        }).catch((response) => {
          console.log(response);
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
@import "../../../static/css/information.less";
.personset.personset1 {
  .form-container {
    width: 766px;
    padding: 0 0 70px;
    margin: 0px auto;
    .uploadPic {
      width: 104px;
      margin: 0 auto;
      text-align: center;
      img {
        display: block;
        width: 104px;
        height: 104px;
        border-radius: 50%;
        border: 1px solid #68aaff;
        margin-bottom: 10px;
      }
      a {
        color: #666666;
        text-decoration: underline;
        font-size: 14px;
      }
    }
    .uploadPic:hover {
      cursor: pointer;
    }
    .el-form {
      margin-top: 34px;
    }
    .el-button {
      width: 136px;
      height: 42px;
    }
    .el-input {
      width: 424px;
    }
    .el-textarea__inner {
      width: 424px;
      height: 100px;
      resize: none;
      border-radius: 8px;
    }
  }
}
</style>